<template>
  <div class="app-wrap">
    <el-row>
      <el-col :xs="{span:24,offset:0}" :sm="{span:24}" :md="{span:22,offset:1}" :lg="{span:20,offset:2}">
  
        <div class="content">
          <div class="content_wrap">
            <div class="content_main">
              <nav-menu v-if="!isCroll" :isScreen="isScreen" @onTopDrawer="topDrawer =true" @onLeftDrawer="leftDrawer = true"/>
              <div class="nav-menu" :style="{zIndex: zIndex}">
                <fixed-menu  @onTopDrawer="topDrawer =true" @onLeftDrawer="leftDrawer = true"/>
              </div>
              <router-view></router-view>
            </div>
            <div class="content_aside hidden-xs-only">
              <right-aside/>
            </div>
          </div>
          <div class="content_footer">
            <com-footer/>
          </div>
        </div>

      </el-col>
    </el-row>

    <el-drawer
      :visible.sync="leftDrawer"
      direction="ltr"
      :with-header="false"
      :size="leftDrawerSize"
      >
      <left-drawer @toClose="leftDrawer = false"/>
    </el-drawer>
  </div>
  
</template>

<script>
import NavMenu from './components/navMenu.vue';
import RightAside from './components/rightAside.vue';
import ComFooter from './components/com-footer.vue';
import FixedMenu from './components/fixedMenu.vue';
import LeftDrawer from './components/leftDrawer.vue';
import { getInfo } from './http/api'

export default {
  
  components: {
    NavMenu,
    RightAside,
    ComFooter,
    FixedMenu,
    LeftDrawer
  },
  name: "Index",
  data () {
    return {
      isCroll: false, //纵向
      isScreen: false, //横向
      screenWidth: 800,
      scrolltopTemp: document.documentElement.scrollTop,
      topDrawer: false,
      leftDrawer: false,
      leftDrawerSize: '',
      zIndex: -1
      //-------
    }
  },
  watch: {
    screenWidth(newValue) {
      if(newValue <= 479) {
        this.leftDrawerSize = '100%';
        this.isScreen = true;
      }else if(newValue <= 768) {
        this.leftDrawerSize = '75%';
        this.isScreen = true;
      }else if(newValue <= 1200){
        this.leftDrawerSize = '35%';
        this.isScreen = false;
      }else {
        this.leftDrawerSize = '25%';
        this.isScreen = false;
      }
    }
    //-----------
  },
  mounted() {
    var lang = localStorage.getItem("lang")
    if(lang != undefined){
      this.$i18n.locale=lang
    }
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll); // 监听（绑定）滚轮滚动事件
    });
    this.onwindowReSize()
    window.onresize = ()=> {
      this.onwindowReSize()
    }
    //---------
    this.init();
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll(e) {
      if(this.screenWidth >= 479) {
        let scrollHeight = document.documentElement.scrollTop; //滚动高度

        if (scrollHeight >= 120) {
          this.zIndex = 1;
        } else {
          this.zIndex = -1;
        }
      }
    },
    onwindowReSize() {
      this.screenWidth = document.body.clientWidth;
    },
    //------------
    init() {}
  }
}

</script>
<style lang="less" scoped>

.nav-menu {
  width: 770px;
  width: inherit;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 999;
}
  
.app-wrapr{
    width: 100%;
    height: 100%;
    
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .content_wrap {
    width: 1170px; 
    display: flex;
    justify-content: center;
    .content_main {
        width: 770px;
      margin-right: 50px;
    }
    content_aside {
      width: 200px;
    }
  }
  .content_footer {
    width: 1170px;
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width: 1199px) {
  .app-wrap{
    padding: 0 20px;
    margin: 0 auto;
  }
    .content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .content_wrap {
        width: 1070px;
        display: flex;
        justify-content: center;
        .content_main {
          width: 670px;
          margin-right: 30px;
        }
        content_aside {
          width: 200px;
        }
      }
      .content_footer {
        width: 1070px;
        display: flex;
        justify-content: center;
      }
    }

    .nav-menu {
      width: 670px;
      width: inherit;
      box-sizing: border-box;
      position: fixed;
      top: 0;
      z-index: 999;
    }
}

@media screen and (max-width: 767px) {

    .content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .content_wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .content_main {
          width: 600px;
          // margin-right: 30px;
        }
        content_aside {
          width: 200px;
        }
      }
      .content_footer {
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }

    .nav-menu {
      width: 600px;
      width: inherit;
      box-sizing: border-box;
      position: fixed;
      top: 0;
      z-index: 999;
    }
}

@media screen and (max-width: 479px) {
  .app-wrap{
    padding: 0 20px;
    margin: 0 auto;
  }
  .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // background-color: #f00;
      .content_wrap {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .content_main {
          width: 600px;
          margin: 0;
        }
        content_aside {
          width: 200px;
        }
      }
      .content_footer {
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }

    .nav-menu {
      width: 600px;
      width: inherit;
      box-sizing: border-box;
      position: fixed;
      top: 0;
      z-index: 999;
    }

}

html {
  overflow-y:scroll;
}
</style>